<div class="header-panel">
    <mat-icon>notifications_none</mat-icon>
    {{'notifications.list-title' | translate}}
</div>
<div class="work-panel">
    <div class="container">
        <mat-table #table [dataSource]="dataSource" matSort>
            <!-- Checkbox Column -->
            <ng-container matColumnDef="select">
                <mat-header-cell *matHeaderCellDef [ngClass]="'selectidthClass'">
                    <button mat-icon-button (click)="onAddNotification()" class="remove">
                        <mat-icon>add</mat-icon>
                    </button>
                </mat-header-cell>
                <mat-cell *matCellDef="let element" [ngClass]="'selectidthClass'">
                    <button mat-icon-button (click)="onEditNotification(element)" class="remove">
                        <mat-icon>edit</mat-icon>
                    </button>
                </mat-cell>
            </ng-container>

            <!-- Name Column -->
            <ng-container matColumnDef="name">
                <mat-header-cell *matHeaderCellDef mat-sort-header> {{'notifications.list-name' | translate}} </mat-header-cell>
                <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
            </ng-container>
            <!-- Receiver Column -->
            <ng-container matColumnDef="receiver">
                <mat-header-cell *matHeaderCellDef mat-sort-header> {{'notifications.list-receiver' | translate}} </mat-header-cell>
                <mat-cell *matCellDef="let element"> {{element.receiver}} </mat-cell>
            </ng-container>
            <!-- Delay Column -->
            <ng-container matColumnDef="delay">
                <mat-header-cell *matHeaderCellDef mat-sort-header> {{'notifications.list-delay' | translate}} </mat-header-cell>
                <mat-cell *matCellDef="let element"> {{element.delay}} </mat-cell>
            </ng-container>
            <!-- Interval Column -->
            <ng-container matColumnDef="interval">
                <mat-header-cell *matHeaderCellDef mat-sort-header> {{'notifications.list-interval' | translate}} </mat-header-cell>
                <mat-cell *matCellDef="let element"> {{element.interval}} </mat-cell>
            </ng-container>            
            <!-- Type Column -->
            <ng-container matColumnDef="type">
                <mat-header-cell *matHeaderCellDef mat-sort-header> {{'notifications.list-type' | translate}} </mat-header-cell>
                <mat-cell *matCellDef="let element"> {{element.type}} </mat-cell>
            </ng-container>
            <!-- Enabled Column -->
            <ng-container matColumnDef="enabled">
                <mat-header-cell *matHeaderCellDef mat-sort-header> {{'notifications.list-enabled' | translate}} </mat-header-cell>
                <mat-cell *matCellDef="let element"> {{element.enabled}} </mat-cell>
            </ng-container>
            <!-- Subscriptions Column -->
            <ng-container matColumnDef="subscriptions">
                <mat-header-cell *matHeaderCellDef mat-sort-header> {{'notifications.list-subscriptions' | translate}} </mat-header-cell>
                <mat-cell *matCellDef="let element"> {{getSubProperty(element)}} </mat-cell>
            </ng-container>

            <!-- Button remove Column -->
            <ng-container matColumnDef="remove">
                <mat-header-cell *matHeaderCellDef> </mat-header-cell>
                <mat-cell *matCellDef="let element">
                    <button mat-icon-button (click)="$event.stopPropagation();onRemoveNotification(element)" class="remove">
                        <mat-icon>clear</mat-icon>
                    </button>
                </mat-cell>
            </ng-container>

            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns;" class="my-mat-row"></mat-row>
        </mat-table>
    </div>
</div>
<button mat-fab color="primary" (click)="onAddNotification()" class="fab-add">
    <mat-icon class="">add</mat-icon>
</button>